<template>
    <div id="caseDetail">
        <div class="newAddTitleDea">
            <div class="fl titleAnme">
                <span>{{caseTitle}}</span>
                <span class='caseIcon'>案例</span>
            </div>
            <div class="fr back" @click="backFn"><i class="iconfont icon-fanhui3"></i> 返回</div>
        </div>
         <div class="jx-content">
            <div class="production-content"  style="margin-top: 10px; height:100%;">
                <div v-if=" businessDescriptionEditorContent != ''">
                    <div  class="business-description-editor-content w-e-text" style="height: auto; border:none;"></div>
                    <div class="praise">

                        <div class="praise_like" :class="{ active : like }" @click="pricelike" @hover="hoverPricelike">
                            <i class="iconfont icon-dianzan"></i>
                            <p>{{ like ? '已喜欢' : '我喜欢' }}</p>
                        </div>
                        <!-- <div v-if="like" class="praise_good" @click="pricelike">
                            <img src="./../../assets/images/liang_ico2.png" />
                            <p style="color:#fff; margin-top:2px">已喜欢</p>
                        </div>
                        <div v-else class="praise_dark" @click="pricelike">
                            <img src="./../../assets/images/dark_ico1.png" />
                            <p style="color:#c2c2c2;margin-top:2px">我喜欢</p>
                        </div> -->
                    </div>
                </div>
                <!-- <div class="production-content-tip" style="text-align:center; padding:60px 0" v-else>
                    <img style="margin-top: 5%;" src="./../../assets/images/project_tips3.jpg" />
                </div> -->
            </div>
        </div>
     </div>
</template>

<script>
    export default {
        data () {
            return {
                id:'',
                //是否有数据
                businessDescriptionEditorContent:'',
                //点赞
                like:'',
                flag:false,
                //上一页面带的值
                caseTitle:''
            }
        },
        created () {
            this.id = this.$route.query.id
            this.caseTitle = this.$route.query.caseTitle
            this.init()
            this.initlike()
        },
        methods: {
             init(){
                let self = this
                self.$http.get('/tes/business/case?caseId='+self.id).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.businessDescriptionEditorContent = res.data.caseContent
                        this.$nextTick(() => {
                            $('.business-description-editor-content').html(res.data.caseContent)
                            $('.business-description-editor-content h1').css({ 'line-height': '50px'})
                            $('.business-description-editor-content p').css({ 'line-height': '2.0'})
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //点击返回
            backFn(){
                this.$router.go(-1)
            },
            //初始化点赞
            initlike(){
                let self = this
                self.$http.get('/tes/business/case/getStarInfoById?caseId='+self.id).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        if(res.data ==''){
                            // console.log(10)
                            self.like = false
                        }else if(res.data !=''){
                            //console.log(1)
                            self.like = true
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //点赞
            pricelike(){
                 let self = this
                 var str = ''
                 if(self.like == false){
                    str = 0
                 }else if(self.like == true){
                    str = 1
                 }
                 self.$http.get('/tes/business/case/clickStar?judge='+str+'&caseId='+self.id).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        if(self.like == false){
                            self.like = 1
                        }else{
                            self.like = 0
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            hoverPricelike(){
                let self = this
                if(!self.like){
                    $('.praise_like').css({
                        'background': ''
                    })
                }
            }
        },
    }
</script>

<style scoped>
    .caseIcon{
        background: #385899;
        font-size: 12px;
        padding: 1px 5px;
        border-radius: 2px;
        color: #fff;

    }
    .newAddTitleDea{
        width: 1200px;
        margin: 20px auto;
        color: #385899;
        background: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
        height: 60px;
        line-height: 60px;
        text-indent: 30px;
        font-size: 15px;
    }
    .titleAnme{
        font-size: 16px;
        font-weight: bold
    }
    .back{
        margin-right: 30px;
        cursor: pointer;
        color: #385899;
    }
    .back:hover{
        color: #1277eb;
    }
    #caseDetail{
        margin-top: 30px;
    }
    .w-e-text{
        font-size: 14px;
        line-height: 2.0;
        overflow-y: hidden;
    }
    .production-content{
        background: #fff;
    }

    .praise{
        background: #fff;
        margin:  0 auto;
        padding: 50px 0;
        text-align: center;

    }
    .praise_good{
        width: 100px;
        border-radius: 34px;
        background: #1277eb;
        padding: 4px 0;
        margin: 0 auto;

    }

    .praise_like{
        width: 120px;
        height: 70px;
        margin: 0 auto;
        box-sizing: border-box;
        background: #eeeeee;
        border-radius: 34px;
        overflow: hidden;
        cursor: pointer;
    }
    .praise_like.active{
        background: #1277eb;
    }
    .praise_like.active i, .praise_like.active p{
        color: #fff;
    }
    .praise_like:hover{
        background: #1277eb;
    }
    .praise_like:hover i, .praise_like:hover p{
        color: #fff;
    }
    .praise_like i{
        font-size: 20px;
        height: 20px;
        display: block;
        margin: 12px auto 9px;
        color: #bfbfbf;
    }
    .praise_like p{
        font-size: 12px;
        color: #bfbfbf;
    }
    .praise_dark{
        width: 100px;
        border-radius: 34px;
        background: #eeeeee;
        padding: 4px 0;
        margin: 0 auto;
    }
    .praise_dark:hover{
        background: #1277eb;
    }
</style>
